<template>
  <view class="ver-layout">
    <view class="top-layout ver-layout-center" :style="{backgroundImage:`url(${ic_select_course_one_bg})`}">
<!--      <view class="course-title">{{ courseObj.title }}</view>-->
<!--      <view class="course-desc">{{ courseObj.cate_description }}</view>-->
    </view>
    <view class="course-layout ver-layout">
      <view class="course-layout-title">{{ courseObj.course_title }}</view>
      <view class="course-layout-lesson">总课节:{{ courseDetail.class_period_totalnum }}节</view>
      <view class="hor-layout" style="margin-top: 18px" v-if="courseObj.price">
        <view class="course-layout-price">{{ courseObj.price }}</view>
        <view class="course-layout-price-origin">原价:6000</view>
      </view>
    </view>
    <view style="height: 18px;background: #F2F2F2"></view>
    <view class="course-info">
      <view class="hor-layout-center">
        <i class="iconfont course-info-icon">&#xe60a;</i>
        <view class="course-info-title">课程介绍</view>
      </view>
      <view class="course-info-text">
        {{ courseDetail.cate_description }}
      </view>
    </view>
  </view>
</template>

<script>
import {CreateClassApi} from "@/api/enterStudent.js"

let ic_select_course_one_bg = require("@/static/home/ic_select_course_one_bg.png")
let engine = new CreateClassApi()
export default {
  name: "courseInfo",
  data() {
    return {
      ic_select_course_one_bg,
      courseObj: {},
      courseDetail: {}
    }
  },
  onLoad(params) {
    console.log(params)
    this.courseObj = params
    this.getCourseDetail()
  },
  methods: {
    getCourseDetail() {
      engine.getCourseDetail(this.courseObj.course_id).then(res => {
        this.courseDetail = res.data
      })
    }
  }
}
</script>

<style scoped>
.top-layout {
  width: 100%;
  height: 170px;
  background-image: linear-gradient(#702CFF, #9840FF);
  background-size: 110% 100%;
}

.course-title {
  font-size: 30px;
  color: white;
  margin-top: 30px;
}

.course-desc {
  margin-top: 20px;
  font-size: 15px;
  color: white;
}

.course-layout {
  padding: 24px 12px;
}

.course-layout-title {
  font-size: 15px;
  font-weight: bold;
  color: #333333;
  font-family: Source Han Sans CN;
}

.course-layout-lesson {
  margin-top: 24px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #333333;
}

.course-layout-price {
  flex: 1;
  font-size: 14px;
  color: #FF1D1D;
  font-family: Source Han Sans CN;
}

.course-layout-price-origin {
  font-size: 12px;
  font-family: Source Han Sans CN;
  text-decoration: line-through;
  color: #333333;
}

.course-info {
  padding: 24px 12px;
}

.course-info-icon {
  color: #FDC62D;
  font-size: 20px;
}

.course-info-title {
  margin-left: 5px;
  font-size: 15px;
  font-family: Source Han Sans CN;
  color: #7183D5;
}

.course-info-text {
  margin-top: 18px;
  font-size: 15px;
  line-height: 25px;
  font-family: Source Han Sans CN;
  color: #333333;
}
</style>
